<template>
    <div>
        <header>
            <p>用户</p>
            <div class="log-out" @click="setLogin">退出账号</div>
        </header>
        <main>
            <div class="top">
                <div class="img"><img src="@/assets/img/R-C.png" alt="" /></div>
                <div class="user">
                    {{ user }}
                    <br />
                    <span>没有签名</span>
                </div>
            </div>
            <div class="main">
                <router-link tag="div" to="history" class="take-notes">
                    <p>购买记录</p>
                </router-link>
                <div class="want">
                    <p>猜你想要</p>
                    <div @click="go('卫衣')">卫衣</div>
                    <div @click="go('睡衣')">睡衣</div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
export default {
    props: ["user", "account"],
    methods: {
        setLogin() {
            this.$emit("setLogin", { user: "", account: "", active: 0 });
            this.$toast.success("登出成功");
            this.$router.push({ name: "shopping" });
        },
        allshopApi() {
            this.axios("http://127.0.0.1/allshop", {
                params: {
                    account: this.account,
                },
            }).then(({ data }) => {
                console.log(data);
            });
        },
        go(text) {
            this.$router.push({ name: "search", params: { value: text } });
        },
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.$nextTick(() => {
                if (vm.user) {
                    next();
                } else {
                    vm.$toast.fail("请先登录");
                    next("/login");
                }
            });
        });
    },
};
</script>

<style lang="scss" scoped>
header {
    p {
        height: 3.125rem;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        line-height: 3.125rem;
        color: #1ba784;
        background-color: #fff;
    }
    .log-out {
        position: absolute;
        right: 0.9375rem;
        top: 0.9375rem;
    }
}
main {
    width: 100vw;
    min-height: 93vh;
    box-sizing: border-box;
    background-color: #fafafa;
    overflow: hidden;
    .top {
        margin-top: 2vh;
        padding: 0.9375rem 5vw;
        display: flex;
        height: 4.375rem;
        // background-color: #fff;
        .img {
            width: 4.375rem;
            height: 4.375rem;
            border-radius: 50%;
            overflow: hidden;
            // background-image: url("@/assets/img/R-C.png");
            // background-position: center;
            // background-size: cover;
            img {
                width: 100%;
            }
        }
        .user {
            margin-left: 1.25rem;
            font-size: 1.75rem;
            font-weight: 600;
            margin-top: 0.625rem;
            span {
                font-weight: normal;
                font-size: 16px;
            }
        }
    }
    .main {
        margin-top: 3vh;
        height: 20vh;
        width: 100%;
        padding: 0 1vw;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        & > div {
            border-radius: 20px;
            width: 45vw;
            height: 100%;
            background-color: #fff;
            p {
                height: 5vh;
                text-align: center;
                line-height: 5vh;
            }
        }
        .want {
            padding: 1vh;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            div {
                height: 5vh;
                margin: 0 5vw;
                box-sizing: border-box;
                border-radius: 10px;
                background-color: #1ba784;
                text-align: center;
                line-height: 5vh;
                color: #fff;
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
}
</style>
